
<div id="header">

    <div id="title">

        <div class="content ">
            <div id="intro">
                <h1>Deforestation Validation Tool</h1>
            </div>
            <div id="overview" class="hidden">
              <h3 id="name">{{ user.user.nickname()[:26] }}</h3>
              <p id="cells"></p>
              <div class="info">
                <p><span id="current_cell">Global map</span><a id="go_back" href="#go_back">go back</a></p>
                <a href="#notes" class="notes">0 NOTES</a>
              </div>

              <div id="cell_analisys" class="analysed">
                <button id="done" class="finish_button">
                  <p class="stats" id="ndfi_change_value"></p>
                  <span class="separator"></span>
                  <p class="done">done</p>
                </button>
              </div>

              <div id="analysed_global_progress">
                <div id="bar">
                    <div id="progress"></div>
                    <div id="progress_number"></div>
                </div>
              </div>

              <!-- next div is shown when all cells are analysed -->
              <div id="analysed_global_final" class="analysed">
                <button id="report_done" class="finish_button">
                  <p class="stats stats_progress"></p>
                  <span class="separator"></span>
                  <p class="done generate">generate</p>
                </button>
              </div>

              <div id="confirmation_dialog">
                {% if user.is_admin() %}
                <h3>Are you sure?</h3>
                <p>Remember that once it has been published it can't be reopened</p>
                <button id="confirm">Confirm</button>
                <a id="cancel" href="#cancel">cancel</a>
                {% else %}
                <h3>Report generation</h3>
                <p>Only administrators can publish deforestation maps, please contact one.</p>
                <a id="cancel" href="#cancel">cancel</a>
                {% endif %}
              </div> <!-- confirmation_dialog -->

           </div> <!-- overview -->
        </div>  <!-- content -->
    </div>

    <div id="tools">
        <div class="content">

            <div id="range_select">
              <p>Latest published report: <strong id="report-date"></strong></p>
              <!-- <a href="#download" id="select_range">reports</a>  -->
            </div> <!-- range_select -->

            <div id="work_toolbar" class="hidden">

                <ul id="selection">
                    <li><a class="button" href="#" id="auto">auto</a></li>
                    <li><a class="button" href="#" id="draw">draw</a></li>
                    <li><a class="button" href="#" id="remove">remove</a></li>
                    <li><a class="button" href="#" id="edit">edit</a></li>
                </ul>

                <ul id="polytype">
                    <li><a class="button" href="#" id="def">def</a></li>
                    <li><a class="button" href="#" id="deg">deg</a></li>
                </ul>

                <ul id="maptools">
                    <li id="compare_li">
                      <a href="#compare" id="compare">Compare View</a>
                      <div id="compare_wrapper">
                        <ul id="compare_buttons">
                          <li><a id="one" href="#one" class="button one">one</a>
                          <li><a id="two" href="#two" class="button two">two</a>
                          <li><a id="four" href="#four" class="button four">four</a>
                        </ul>
                      </div>
                    </li>
                    <li id="range">
                        <a href="#" id="ndfirange">Range Settings</a>
                        <div id="slider_wrapper">
                            <div id="ndfi_slider">
                              <span class="hack_red"></span>
                            </div>
                        </div>
                    </li>
                </ul>

            </div> <!-- work_toolbar -->

        </div> <!-- content -->
    </div> <!-- tools -->

</div>
